<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AgileUI Demo</title> #parse("page_include.html")
</head>
<style type="text/css">
#container {
	position: relative;
	width: 800px;
	height: 400px;
	border: 1px solid #CCC;
	overflow: hidden;
}

#map {
	position: absolute;
}

.mark {
	position: absolute;
	border: 1px solid red;
	width: ${width}px;
	height: ${height}px;
	font-size: 0px;
}
</style>
<script type="text/javascript">
    var mark = [];
    function $(id) {
        return document.getElementById(id);
    }
    function point(x, y) {
        this.x = x;
        this.y = y;
    }
    function getOffset(obj) {
        var x = 0, y = 0;
        while (obj) {
            x += obj.offsetLeft;
            y += obj.offsetTop;

            obj = obj.offsetParent;
        }
        return { x : x, y : y };
    }
    function addMark(p, x, y, index) {
        var div = document.createElement("div");
        div.onclick=function(){
            alert();
        }
        div.id = "mark" + index;
        div.className = "mark";
        div.style.left = x + "px";
        div.style.top = y + "px";
        p.appendChild(div);
    }
    window.onload = function() {
        var container = $("container");
        var x = '${x}';
        var y = '${y}';
        var length = '${length}';
        addMark(container, x, y, length);
    };
    function add() {
        var container = $("container");
        addMark(container, "182", "71", "90");
    }
    function addMarkToActivePoint(processInstanceId){
        var url = '${rc.contextPath}/admin/saveRoleResource.do';
        var data = { "roleId" : processInstanceId};
        ajaxPost(url, data, function(rs) {
            showMsg(rs.msgInfo);
        });
    }
</script>
</head>
<body>
	<div id="container">
		<div id="map">
			<img alt="sf" src="${rc.contextPath}/demo/activitDiagram.do">
		</div>
	</div>
	<br />
	<input type="button" value="清除标记" onclick="add()" />
</body>
</html>